<template>
  <div class="shui">
    <div class="lia">
      <div class="liashui">
        <img src="../assets/images/zongdian.png" alt="" style="margin-left: 10px" />
        <span style="margin: 0 5%"></span>
        <div>
          <p style="font-size: 20px">12333</p>
          <p>总用电量</p>
        </div>
      </div>
      <div class="liashui">
        <img src="../assets/images/zongshui.png" alt="" style="margin-left: 60%" />
        <span style="margin: 0 5%"></span>
        <div>
          <p style="font-size: 20px">12333</p>
          <p>总用电量</p>
        </div>
      </div>
    </div>
    <div class="shuidian" ref="shuidian"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, onMounted, reactive, watch } from "vue";
import { getWearth } from "../request/index";
const shuidian = ref(null);
const option = reactive({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {
    data: ["Forest", "Steppe", "Desert", "Wetland"],
  },
  toolbox: {
    show: true,
    orient: "vertical",
    left: "right",
    top: "center",
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ["line", "bar", "stack"] },
      restore: { show: true },
      saveAsImage: { show: true },
    },
  },
  xAxis: [
    {
      type: "category",
      axisTick: { show: false },
      data: ["qi", "2013", "2014", "2015", "2016"],
    },
  ],
  yAxis: [
    {
      type: "value",
    },
  ],
  series: [
    {
      name: "Forest",
      type: "bar",
      data: [100, 100, 100, 100, 100],
    },
    {
      name: "Steppe",
      type: "bar",
      data: [100, 100, 100, 100, 100],
    },
    {
      name: "Desert",
      type: "bar",
      data: [100, 100, 100, 100, 100],
    },
    {
      name: "Wetland",
      type: "bar",
      data: [100, 100, 100, 100, 100],
    },
  ],
});
let myChart;
onMounted(() => {
  myChart = echarts.init(shuidian.value);
  myChart.setOption(option);
  getWearth().then((res) => {
    option.xAxis[0].data = res.data.data.result[0].yAxis.data;

    let respseriesData = res.data.data.result[0].series;
    option.series = respseriesData.map((item) => {
      return {
        name: item.name,
        type: item.type,
        data: item.data,
      };
    });
    option.legend = respseriesData.map((item) => {
      return {
        name: item.name,
      };
    });
  });
});
window.addEventListener("resize", function () {
  myChart.resize();
});
watch(option, () => {
  myChart.setOption(option);
});
</script>

<style lang="scss">
.shui {
  width: 90%;
  height: 400px;
  margin-left: 5%;
  margin-top: 3%;
  color: #fff;

  .lia {
    width: 80%;
    margin: 0 10%;
    height: 15%;
    background: url("../imgs/tianqi.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    .liashui {
      display: flex;
      margin-left: -2.5%;
    }
  }
  .shuidian {
    width: 90%;
    height: 80%;
    margin: 2% 5%;
  }
}
</style>
